<template>
    <!-- 滑动验证码 -->
      <div ref="dragDiv" class="drag">
        <div class="drag_bg"></div>
        <div class="drag_text">{{ confirmWords }}</div>
        <div ref="moveDiv" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg"
             style="position: absolute;top: 0px;left: 0px;" @mousedown="mousedownFn($event)"></div>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            beginClientX: 0, /* 距离屏幕左端距离 */
            mouseMoveStata: false, /* 触发拖动状态  判断 */
            maxwidth: '', /* 拖动最大宽度，依据滑块宽度算出来的 */
            confirmWords: '拖动滑块验证', /* 滑块文字 */
            confirmSuccess: false /* 验证成功判断 */
          }
        },
        mounted () {
          this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
          document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn);
          document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
        },
        methods: {
          mousedownFn: function (e) {
            if (!this.confirmSuccess) {
              e.preventDefault && e.preventDefault(); // 阻止文字选中等 浏览器默认事件
              this.mouseMoveStata = true;
              this.beginClientX = e.clientX;
            }
          },
          // mousedoen 事件
          successFunction () {
            this.confirmSuccess = true
            this.confirmWords = '验证通过';
            if (window.addEventListener) {
              document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn);
              document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn);
            } else {
              document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {});
            }
            document.getElementsByClassName('drag_text')[0].style.color = '#fff'
            document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
            document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
          },
          // 验证成功函数
          mouseMoveFn (e) {
            if (this.mouseMoveStata) {
              let width = e.clientX - this.beginClientX;
              if (width > 0 && width <= this.maxwidth) {
                document.getElementsByClassName('handler')[0].style.left = width + 'px';
                document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
              } else if (width > this.maxwidth) {
                this.successFunction();
                console.log('验证成功');
              }
            }
          },
          // mousemove事件
          moseUpFn (e) {
            this.mouseMoveStata = false;
            var width = e.clientX - this.beginClientX;
            if (width < this.maxwidth) {
              document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
              document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
            }
          }
        }
      }
    </script>
    
    <style scoped>
        .drag{
            position: relative;
            background-color: #e8e8e8;
            width: 300px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            margin-left:70px;
            border-radius:30px;
        }
        .handler{
            width: 40px;
            height: 32px;
            border: 1px solid #ccc;
            cursor: move;
        }
        .handler_bg{
            background: #fff url("") no-repeat center;
        }
        .handler_ok_bg{
            background: #fff url("") no-repeat center;
        }
        .drag_bg{
            background-color: #8940e8;
            height: 34px;
            width: 0px;
            border-radius:30px;
        }
        .drag_text{
            border-radius:30px;
            position: absolute;
            top: 0px;
            width: 100%;text-align: center;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -o-user-select:none;
            -ms-user-select:none;
        }
    </style>
    
    
    